Page({
  data: {
    currentTopic: 'southern',  // 默认主题
    sections: [
      { id: 'origin', name: '起源' },
      { id: 'development', name: '发展' },
      { id: 'history', name: '历史' },
      { id: 'significance', name: '意义' }
    ],
    currentSection: 'origin'  // 默认显示的部分
  },

  // 切换主题
  switchTopic(event) {
    const topic = event.currentTarget.dataset.topic;
    this.setData({
      currentTopic: topic
    });
    // 可在此设置切换主题时加载对应内容
  },

  // 点击左侧导航栏，滚动到对应部分
  scrollToSection(event) {
    const sectionId = event.currentTarget.dataset.id;
    this.setData({ currentSection: sectionId });
    wx.pageScrollTo({
      selector: `#${sectionId}`,
      duration: 300
    });
  },

  // 监听滚动事件，动态更新左侧导航栏高亮
  onScroll(event) {
    const scrollTop = event.detail.scrollTop;
    const query = wx.createSelectorQuery().in(this);

    query.selectAll('.section').boundingClientRect((rects) => {
      rects.forEach((rect) => {
        if (scrollTop >= rect.top - 50 && scrollTop < rect.bottom) {
          this.setData({
            currentSection: rect.id
          });
        }
      });
    }).exec();
  }
});
